<div class="hot-songs">
  <div class="pl-songlist">
    <div class="pl-songlist-header">
      <h2>歌曲列表 ({{songs.length}})</h2>
      <!-- <span>播放次数: <span style="font-size: 1.5rem;"></span> </span> -->
    </div>
    <!-- 歌曲表单 -->
    <div class="pl-songlist-table">
      <nz-table #basicTable [nzData]="songs" [nzFrontPagination]="false">
        <thead>
          <tr>
            <th></th>
            <th>歌曲标题</th>
            <th>时长</th>
            <th>歌手</th>
            <th>专辑</th>
            <!-- <th>操作</th> -->
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data,let index = index">
            <td style="display: flex;">
              <span style="margin-right: 10px;">{{index}}</span>
              <i class="icon-zanting" (click)="handlePlay(data)"></i>
            </td>
            <td>
              <div class="td-name" class="td-name" (click)="toSong(data.id)">
                {{ data.name }}
              </div>
            </td>
            <td class="td-size">{{ data.dt  | date:'mm:ss'}}</td>
            <td>
              <div class="td-artist">
                <span *ngFor="let item of data.ar" (click)="toArtist(item.id)">
                  {{ item.name }}
                </span>
              </div>
            </td>
            <td>
              <div class="td-album" (click)="toAlbum(data.al.id)">
                {{ data.al.name }}
              </div>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>